<template>
    <!-- 备案 -->
    <div class="app-container">
        <div class="auditTop">
            <el-row>
                <el-col class="auditTopCol" :span="24">
                    <div>
                        <div class="auditTopTitle">个人审批信息统计</div>
                        <div class="auditTopCon">
                            <el-col :span="6" v-for="(item, index) in auditCount" :key="index">
                                <div>
                                <el-statistic :title="item.title" >
                                    <template slot="formatter">
                                        <span :style="'color:' + item.color">{{item.value}}</span>
                                    </template>
                                </el-statistic>
                                </div>
                            </el-col> 
                            
                        </div>
                    </div> 
                </el-col>
            </el-row>
        </div>
        <div class="auditContent">
            <div class="">搜索条件</div>
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="120px"
                >
                <el-form-item label="申报编号" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入申报编号" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="申请类型" prop="name">
                    <el-select
                    v-model="queryParams.type"
                    clearable
                    >
                        <el-option
                            v-for="(v,index) in typeList"
                            :key="index"
                            :label="v.label"
                            :value="v.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请单位" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入申请单位" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="申报时间" prop="name">
                    <el-date-picker clearable
                        v-model="queryParams.time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择申报时间">
                        </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="auditTable">
            <el-table
                border
                fit
                highlight-current-row
                empty-text="暂无数据"
                v-loading="loading"
                :data="dataList"
                >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="申报编号" align="center" prop="name" />
                <el-table-column label="申请类型" align="center" prop="provinceName" />
                <el-table-column label="申报单位" align="center" prop="cityName" />
                <el-table-column label="申报时间" align="center" prop="areaName" />
                <el-table-column label="所属区域" align="center" prop="address" />

                <!-- <el-table-column label="申报时间" align="center" prop="constructionUnit" />
                <el-table-column label="审核状态" align="center" prop="constructionCompany" /> -->
                
                <el-table-column
                    label="操作"
                    width="150"
                    align="center"
                    fixed="right"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-info"
                            @click="handleDesc(scope.row)"
                            v-hasPermi="['modules:info:query']"
                        >详情</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['construction:site:edit']"
                        >审批</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['modules:solieInfo1:edit']"
                        >整改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="auditTop">
            <div></div>
        </div> -->
  
    </div>
  </template>
  
  <script>
    

  export default {
    name: "audit",
    components: {  },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          state: '',
          name: '',
          time: '',
        },
        dataList: [{}],
        loading: false,
        typeList: [],
        auditCount: [{
            title: "全部审批",
            value: "152",
            color: "blue",
        }, {
            title: "逾期审批",
            value: "5",
            color: "red",
        }, {
            title: "代办审批",
            value: "12",
            color: "#fda705",
        }, {
            title: "完成率",
            value: "89%",
            color: "#3fff04",
        }]
      };
    },
    mounted() {
            
    },
    methods: {
        handleQuery(){
        },
        toAdd(){
            // this.$router.push({path: '/auditAdd'})
        },
        toDesc(){

        }
    }
  };
  </script>
  
  <style scoped lang="scss" >
  .auditTop{
    .auditTopCol{
        padding: 10px;
    }
    .auditTopTitle{
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0px;
        color: #000000;
    }
    .auditTopCon{
        margin-top: 20px;
    }
    .auditTopDesc{
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: #4B5563;
        padding: 10px 0;
    }
  }
  .auditContent{
    padding: 20px;
  }
  .auditTable{
    padding: 10px;;
  }
  </style>